<template>
  <div class="wrap">
    <el-dialog
      title="设置轴体"
      :visible.sync="showDialog"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="input-row">
        <el-input
          placeholder="请输入内容"
          @input="changeSearchWord"
          v-model="searchWord"
          class="input-search-word"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <el-table :data="switchList" border style="width: 100%" @row-click="choseRow">
        <el-table-column prop="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="simpleName" label="名称"></el-table-column>
        <el-table-column prop="switchTypeName" label="轴体类型" width="180"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :total="totalPage"
        :page-size="pageSize"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  Button,
  Dialog,
  Input,
  Table,
  TableColumn,
  Pagination
} from "element-ui";
import { getSwitchList } from "@/api/keyswitch.js";

export default {
  name: "switch-dialog",
  components: {
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Input.name]: Input,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination
  },
  props: {
    showDialog: Boolean,
  },
  data() {
    return {
      searchWord: null,
      switchList: [],
      pageNum: 1,
      pageSize: 5,
      totalPage: 0
    };
  },
  mounted() {
    this.refreshList();
  },
  methods: {
    refreshList() {
      getSwitchList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.searchWord
      })
        .then(res => {
          this.switchList = res.list;
          this.switchList.forEach((item, index) => (item.index = index + 1));
          this.totalPage = res.total;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    cancle() {
      this.$emit("cancle");
    },
    changePage(page) {
      this.pageNum = page;
      this.refreshList();
    },
    changeSearchWord() {
      this.refreshList();
    },
    choseRow(row, column, event) {
      this.$emit("choseSwitch", row.id);
    }
  }
};
</script>
<style lang="stylus" scoped>
.input-row {
  .input-search-word {
    width: 500px;
  }
}
</style>